<template>
  <div :id="id"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'OverPerChart',
  components: {},
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    percentNum: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      chart: null
    }
  },
  created () {
  },
  mounted () {
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
    this.chart.dispose()
    this.chart = null
  },
  computed: {},
  watch: {},
  methods: {
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(
        {
          color: ['#56abe8', '#dee3e9'],
          series: [
            {
              name: '超重率',
              type: 'pie',
              radius: ['65%', '87%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
                formatter: '{text|{c}%}' + '{text|\n超重率}',
                rich: {
                  percentNum: {
                    color: '#3D414B',
                    fontSize: '16',
                    fontWeight: 700
                  },
                  text: {
                    fontSize: 12,
                    color: '#ffffff',
                    padding: [3, 0, 0, 0]
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  name: 'b',
                  value: '100',
                  itemStyle: {
                    color: '#f2f2f2'
                  }
                },
                {
                  name: 'a',
                  value: this.percentNum,
                  label: {
                    show: true
                  },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#F7B500'
                      },
                      {
                        offset: 0.5,
                        color: '#FA6400'
                      },
                      {
                        offset: 1,
                        color: '#E02020'
                      }
                    ])
                  }
                }
              ]
            }
          ]
        }
      )
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
